<template>
    <div class="card-box">
        <el-dialog  :close-on-click-modal="false" :visible.sync="dialogVisible" width="750px" title="业务类型流程配置">
            <el-form ref="enheng" :model="enheng" >
                <el-table class="flowTable" stripe :data="assessInfoData" align="center" >
                    <el-table-column label="隐藏ID" prop="procdefConfId" v-if="hideId" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.procdefConfId" required/>
                        </template>
                    </el-table-column>
                    <el-table-column label="业务类型" :render-header="xiaohongxing"  prop="busiTypeCode" width="200px" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.busiTypeCode" required>
                                <el-option
                                    v-for="item in shuju"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="流程名称" prop="procdefName" width="300px" align="center">
                        <template slot-scope="scope">
                            <el-input :placeholder=setPlaceholder(rowName) :disabled="true" v-show="show" v-model="scope.row.procdefName"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否有效" prop="isValid" width="100px" align="center">
                        <template slot-scope="scope" >
                            <el-select v-model="scope.row.isValid" required>
                                <el-option
                                    v-for="item in countys"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value" >
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column :render-header="renderHeader" width="100px" align="center">
                        <template slot-scope="scope">
                            <el-button v-show="show" @click="deleteRow(scope.$index)" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog()">取 消</el-button>
                <el-button  type="primary" @click="submitForm()">保 存</el-button>
             </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {sameData,delprocdefConfId,findConfig} from "~/views/wy-flow/api/actreprocdef"
    import axios from 'axios'
    import utils from '~/utils/index'

    export default {
        components: {},
        data() {
            return {
                infoEdit: [true],
                infoEdit2: [true],
                loading: false,
                dialogVisible: false,
                assessInfoData: [],
                enheng: {},
                countys:[
                    {value:1,label:"是"},
                    {value:0,label:"否"},
                ],
                shuju:[],
                rowValue:'',
                rowName:"",
                hideId:false,
            }
        },
        computed: mapState({
            user: state => state.user.user
        }),
        created: function(){
            // this.getSelectData()
        },
        methods: {
            xiaohongxing(cerateElement, { column }) {
                return cerateElement("div", [
                    cerateElement("span", {
                        domProps: {
                            innerHTML: "*"
                        },
                        style: {
                            color: "red",
                            fontSize: "16px",
                            marginLeft: "5px"
                        }
                    }),
                    cerateElement("span", column.label),
                ]);
            },

            setPlaceholder(show) {
                return show ? this.rowName : this.rowName
            },
            renderHeader(h, params) {
                let a = [h('el-button', {
                    props: {
                        size: "mini",
                        type: "primary"
                    },
                    on: {
                        click: () => {
                            this.addsome();
                        }
                    }
                }, '增加')];
                return h('div', a);
            },
            addsome(){
                this.assessInfoData.push({procdefName:this.rowName,isValid:1})
            },
            deleteRow(index){
                if((this.assessInfoData[index].procdefConfId==null)==false){
                    var delid=this.assessInfoData[index].procdefConfId
                    delprocdefConfId(delid).then(response=>{
                        this.suc('数据删除请求提交成功')
                    }).catch(error=>{
                        this.suc('数据删除请求提交失败')
                    })
                }
                this.assessInfoData.splice(index,1);

            },
            submitForm() {
                var flag=false;
                for(var i=0;i<this.assessInfoData.length;i++){
                    if(this.assessInfoData[i].busiTypeCode==undefined){
                        flag=true;
                        break;
                    }
                }
                if(flag==true){
                    this.Message.error()
                    alert("请选择业务类型！")
                }else {
                    axios.post("/api/flowTaskConf/doUpdateFlowProcdefConf",{
                        procDefId:this.rowValue,
                        flowProcdefConfList:this.assessInfoData
                    }).then(response=>{
                        if(response.data){
                            this.res=response.data;
                            this.suc('数据提交成功')
                        }
                    }).catch(error=>{
                        this.suc('数据提交失败')
                    })
                    this.closeDialog()
                }
            },
            show(rowData){
                this.rowName=rowData.procName
                this.rowValue=rowData.procDefId
                this.loading = false
                sameData(this.rowValue).then(response=>{
                    this.assessInfoData=response.data.data.flowProcdefConfList
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
                this.dialogVisible = true
                this.shuju=utils.getDict('busi_type_code')
            },
            closeDialog(){
                this.dialogVisible = false
            }
        }
    }
</script>
<style scoped lang='scss'>
    
    @include formWrap();

    .card-box{
        /deep/ .el-input.is-disabled .el-input__inner{
            background: #ffffff;
        }
    }
</style>
